<style>
  .demo-grid {
    background: rgba(0, 0, 0, 0.2);
    min-width: 360px;
  }

  .demo-grid--alignment {
    max-width: 800px;
  }

  .demo-grid--cell-alignment {
    min-height: 200px;
  }

  .demo-inner {
    min-height: 200px;
  }

  .demo-cell {
    background: rgba(0, 0, 0, 0.2);
    height: 100px;
  }

  .demo-cell--alignment {
    max-height: 50px;
  }
</style>
<div>
  <h3 class="mdc-typography--subtitle1">Columns</h3>
  <div class="mdc-layout-grid demo-grid">
    <div class="mdc-layout-grid__inner">
      <div
        class="mdc-layout-grid__cell mdc-layout-grid__cell--span-6 demo-cell"
      ></div>
      <div
        class="mdc-layout-grid__cell mdc-layout-grid__cell--span-3 demo-cell"
      ></div>
      <div
        class="mdc-layout-grid__cell mdc-layout-grid__cell--span-2 demo-cell"
      ></div>
      <div
        class="mdc-layout-grid__cell mdc-layout-grid__cell--span-1 demo-cell"
      ></div>
      <div
        class="mdc-layout-grid__cell mdc-layout-grid__cell--span-3 demo-cell"
      ></div>
      <div
        class="mdc-layout-grid__cell mdc-layout-grid__cell--span-1 demo-cell"
      ></div>
      <div
        class="mdc-layout-grid__cell mdc-layout-grid__cell--span-8 demo-cell"
      ></div>
    </div>
  </div>
  <h3 class="mdc-typography--subtitle1">Grid Left Alignment</h3>
  <p class="mdc-typography--body2">
    This requires a max-width on the top-level grid element.
  </p>
  <div
    class="mdc-layout-grid mdc-layout-grid--align-left demo-grid demo-grid--alignment"
  >
    <div class="mdc-layout-grid__inner">
      <div class="mdc-layout-grid__cell demo-cell"></div>
      <div class="mdc-layout-grid__cell demo-cell"></div>
      <div class="mdc-layout-grid__cell demo-cell"></div>
    </div>
  </div>
  <h3 class="mdc-typography--subtitle1">Right Alignment</h3>
  <p class="mdc-typography--body2">
    This requires a max-width on the top-level grid element.
  </p>
  <div
    class="mdc-layout-grid mdc-layout-grid--align-right demo-grid demo-grid--alignment"
  >
    <div class="mdc-layout-grid__inner">
      <div class="mdc-layout-grid__cell demo-cell"></div>
      <div class="mdc-layout-grid__cell demo-cell"></div>
      <div class="mdc-layout-grid__cell demo-cell"></div>
    </div>
  </div>
  <h3 class="mdc-typography--subtitle1">Cell Alignment</h3>
  <p class="mdc-typography--body2">
    Cell alignment requires a cell height smaller than the inner height of the
    grid.
  </p>
  <div class="mdc-layout-grid demo-grid demo-grid--cell-alignment">
    <div class="mdc-layout-grid__inner demo-inner">
      <div
        class="mdc-layout-grid__cell mdc-layout-grid__cell--align-top demo-cell demo-cell--alignment"
      ></div>
      <div
        class="mdc-layout-grid__cell mdc-layout-grid__cell--align-middle demo-cell demo-cell--alignment"
      ></div>
      <div
        class="mdc-layout-grid__cell mdc-layout-grid__cell--align-bottom demo-cell demo-cell--alignment"
      ></div>
    </div>
  </div>
</div>
